<template>
	<section>
		<div v-for="(Item,index) in dataList" :key="index" class="service">
		<div class="icon">
			<img :src="Item.image" alt="服务图标">
		</div>
		<div class="content" :style="index==(dataList.length-1)? 'border-bottom:'+'unset':''">
			<ul>
				<li class="firli">{{Item.name}}</li>
				<li class="secli">{{Item.desc}}</li>
			</ul>
		</div>
		<div class="button" :style="index==(dataList.length-1)? 'border-bottom:'+'unset':''">
			<a type="b" @click="">查看</a>
		</div>
	    </div>
	</section>

</template>

<script>
	export default {
		name: 'wioc-select-services',
		props:['dataList'],
		data() {
			return {
				infodesc: [
				    {
                        image: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                        name: '徐家汇商圈',
                        desc: '百货？逛街？来这里准没错！',
                    }/*, {
                        image: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                        name: '徐汇公共文化',
                        desc: '搜寻徐汇的公共文化经典',
                    }, {
                        image: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                        name: '徐汇文化遗存',
                        desc: '徜徉徐汇的历史长廊',
                    }*/]
			}
		}
	}
</script>

<style lang="less" scoped>
	.service {
		display: flex;
		flex-direction: row;
		height: 0.575rem;
		width: 3.15rem;
		.icon {
			flex: 1;
			height: 100%;
			img{
				width: 0.3rem;
				height: 0.3rem;
				margin-left: 22%;
				padding-top: 22%;
				position: relative;
				vertical-align: top;
			}
		}

		.content {
			flex: 4;
			border-bottom:0.01rem solid #f0f0f0;
			height: 100%;
			&>ul{
				padding-top: 0.1rem;
				.firli{
					line-height: 0.18rem;
					font-family:PingFangSC-Semibold;
					font-size:0.13rem;
					color:#595959;
					letter-spacing:-0.08px;
					text-align:left;
				}
				.secli{
					font-family:PingFangSC-Regular;
					font-size:0.11rem;
					color:#979797;
					letter-spacing:-0.08px;
					text-align:left;
					line-height: 0.16rem;
				}
			}
		}

		.button {
			height: 100%;
			border-bottom: 0.01rem solid #f0f0f0;
			flex: 1;
			display: flex;
			a{
				width: 0.5rem;
				height: 0.25rem;
				text-align: center;
				line-height: 0.25rem;
				border-radius: 0.25rem;
				background-color: #e7f2fc;
				margin-top: 22%;
				font-family:PingFangSC-Semibold;
				font-size:0.11rem;
				color:#4ba0f3;
				letter-spacing:-0.08px;
			}
		}


	}
</style>
